<template>
  <div>
    <!-- <LifeCycle v-if="isShow"></LifeCycle> -->
    <!-- <h1>获取图书信息</h1>
    <button @click="getAllFn">点击 -查看控制台</button> -->
    <!--  -->
    <p>2. 查询某本书籍信息</p>
    <input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
    <button @click="findFn">查询</button>
  </div>
</template>

<script>

import axios from 'axios'
// import LifeCycle from '@/components/LifeCycle.vue'
export default {
  // 注册
  components: {
    // LifeCycle,
  },
  data() {
    return {
      isShow: true,
      bName: '',
    }
  },
  methods: {
    getAllFn() {
      axios({
        method: 'GET', //默认就是get
        url: 'http://123.57.109.30:3006/api/getbooks',
        // params:{}//get请求的参数写在这里面
        // data:{}//post请求的参数写在这里面
      })
        .then((res) => {
          console.log(res.data)
        })
        .then((err) => {
          console.log(err)
        })
    },
    //
    findFn() {
      axios({
        method: 'GET',
        url: 'http://123.57.109.30:3006/api/getbooks',
        // params的参数会拼接到url上
        params: {
          // 请求的书名就是双向绑定的v-model 的bName值

          bookname: this.bName, //相当于=> url: 'http://123.57.109.30:3006/api/getbooks?bookname=this.bName',
        }, //get请求的参数写在这里面
        // data:{}//post请求的参数写在这里面
      })
        .then((res) => {
          console.log(res);
          console.log(res.data)
        })
        .then((err) => {
          console.log(err)//没有就会打印undefined
        })
    },
  },
  // // 生命周期创建之前  这个是一个函数
  // // 在这个beforeCreate生命周期中  获取不到我们定义的数据
  // beforeCreate() {
  //   // console.log('大家好 我被创建了', this.uname, this.say())//这里直接报错了
  //   console.log('大家好 我是创建之前', this.uname, this.say) //这2个都是undefined
  // },
  // //
  // created() {
  //   // 我们一般在created生命周期中去请求服务器数据   可以获取到我们定义的数据
  //   console.log(
  //     '初始化数据,并且让当前实例代理了你的数据 ',
  //     this.uname,//
  //     this.say
  //   )
  //   this.say()
  // },
  // data() {
  //   return {
  //     uname: '张三',
  //   }
  // },
  // methods: {
  //   say() {
  //     console.log('我感觉很糟糕 前面学的都忘了')
  //   },
  // },
}
</script>

<style></style>
